<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'

const router = useRouter()

// 计算属性：判断当前页面是否需要显示头部和底部
const showHeader = computed(() => {
  const hiddenRoutes = ['/login', '/register']
  return !hiddenRoutes.includes(router.currentRoute.value.path)
})

const showFooter = computed(() => {
  const hiddenRoutes = ['/login', '/register', '/consult']
  return !hiddenRoutes.includes(router.currentRoute.value.path)
})
</script>
<template>
  <div class="app-container">
    <!-- 头部导航栏 -->
    <AppHeader v-if="showHeader" />
    
    <!-- 主要内容区域 -->
    <main class="app-main">
      <router-view />
    </main>
    
    <!-- 底部信息 -->
    <AppFooter v-if="showFooter" />
  </div>
</template>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f7fa;
}

#app {
  height: 100%;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-top: 80px; /* 为固定的头部留出空间 */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .app-main {
    padding: 10px;
    padding-top: 70px; /* 为固定的头部留出空间 */
  }
}

/* 加载动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  /* animation: spin 1s linear infinite;  */
}

/* 淡入淡出过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 从下往上渐入 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.2s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>
